/*
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-07 17:52:08
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-08 16:05:54
 */
import classnames from 'classnames'
import Icon from '@/components/Icon/Icon'
import styles from './index.module.scss'
import { Article } from '@/types/data'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import Image from '@/components/Image/Image'
import 'dayjs/locale/zh-cn'
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

console.log(dayjs('2022-05-06').fromNow())

type Props = {
  /**
   * 图片类型说明
   * 0 表示无图 1 表示单图 3 表示三图
   */
  // type?: 0 | 1 | 3
  article: Article
}


const ArticleItem = ({ article }: Props) => {
  const {
    title,
    cover: { type, images },
    aut_name,
    comm_count,
    pubdate
  } = article
  return (
    <div className={styles.root}>
      <div
        className={classnames(
          'article-content',
          (type === 3) && 't3',
          type === 0 && 'none-mt'
        )}
      >
        <h3>{title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images.map((image, index) => (
              <div key={index} className="article-img-wrapper">
                {/* <img src={image} alt="" /> */}
                <Image src={image}></Image>
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{aut_name}</span>
        <span>{comm_count} 评论</span>
        <span>{dayjs(pubdate).fromNow()}</span>
        <span className="close">
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  )
}

export default ArticleItem